<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<!-- 引入组件 -->
		 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script> 
		<script src="html5plus://ready"></script>
		<link href="../../css/shouye.css"/>
		<link rel="stylesheet" href="../../css/xq.css" />
		<link rel="stylesheet" href="../../css/main.css" />
		<script src="../../js/ajax.js"></script>
		<script src="../../js/Up.js"></script>
		
	</head>
	<body>
		<div id="app1" style="background-color: rgba(0,0,0,0.05);">
			<header>
				<van-row  style="background: red;">
					<van-col span="4">
						<van-icon size="20px" style="margin-top: 25px; margin-left: 22px;" name="scan" />
					</van-col>
					<van-col span="20" style="margin-left: -10px;">
						<van-search background="red" v-model="value"  @search="onSearch" placeholder="搜索商品名称" show-action>
							<div slot="action">
								<van-icon name="chat-o" size="25px" style="margin-top:-10px;margin-top: 15px; margin-left: 5px;" />
							</div>
						</van-search>
					</van-col>
				</van-row>										
			</header>
			<section>
				<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
					<van-row>
					<van-col span="24" style="margin-top: -10px;">
						<van-tabs v-model="active">
							<van-tabs v-model="active">
							<van-tab title="服饰" style="background: white;">
							<div style="background-color: #eeeeee; width: 100%; height: 20px;"></div>
							<div style="text-align: center; margin-top: 20px;">
								<van-icon color="red" name="clock-o"></van-icon>
								<span style="color: #C0C0C0;">每天十点上新</span>
							</div>
							<div style="margin-top: 25px;">
								<span style="margin-left: 15px;">
									<img style="width: 18%; height: 15%;" src="../../img/11.jpg" />
								</span>
								<span style="margin-left: 15px;">
									<img style="width: 18%; height: 15%;" src="../../img/12.jpg" />
								</span>
								<span style="margin-left: 15px;">
									<img style="width: 18%; height: 15%;" src="../../img/13.jpg" />
								</span>
								<span style="margin-left: 15px;">
									<img style="width: 18%; height: 15%;" src="../../img/14.jpg" />
								</span>
							</div>
							<div style="margin-top: 5px;">
								<span style="margin-left: 25px; color: #C0C0C0;">
									衬衫
								</span>
								<span style="margin-left: 45px; color: #C0C0C0;">
									牛仔褂
									<span style="margin-left: 45px; color: #C0C0C0;">
										裙子
									</span>
									<span style="margin-left: 45px; color: #C0C0C0;">
										开衫
									</span>
							</div>
							<div style="margin-top: 25px;">
								<span style="margin-left: 15px;">
									<img style="width: 18%; height: 15%;" src="../../img/15.jpg" />
								</span>
								<span style="margin-left: 15px;">
									<img style="width: 18%; height: 15%;" src="../../img/16.jpg" />
								</span>
								<span style="margin-left: 15px;">
									<img style="width: 18%; height: 15%;" src="../../img/17.jpg" />
								</span>
								<span style="margin-left: 15px;">
									<img style="width: 18%; height: 15%;" src="../../img/18.jpg" />
								</span>
							</div>
							<div style="margin-top: 5px;">
								<span style="margin-left: 25px; color: #C0C0C0;">
									连衣裙
								</span>
								<span style="margin-left: 45px; color: #C0C0C0;">
									套装
									<span style="margin-left: 45px; color: #C0C0C0;">
										短袖
									</span>
									<span style="margin-left: 45px; color: #C0C0C0;">
										毛衣
									</span>
							</div>
							<!-- 热门推荐 -->
										<van-row style="background-color: white; width: 100%;">
											<van-col span="11" id="tuijian">
												<div >
													<div style="margin-left: 5px;margin-top: 5px; font-size: 20px;"><span style="color: #FF4444;">|</span>热门推荐</div>
													<div v-for="item in hot">
														<a href="#"><img :src="item.GoodsImageUrl.src"  onerror="this.src='../../img/520.jpg'"/><br /></a>
														<van-card style="height: 60px;background-color: white;margin-top: -10px;" :title="item.Name" :price="item.MarketPrice"></van-card>
													</div>
												</div>
											</van-col>
										</van-row>
										<!-- 商品列表 -->
				<van-row style="background-color: white; width: 100%;">
					<van-col span="23">
						<div style="margin-left: 5px;margin-top: 5px; font-size: 20px;"><span style="color: #FF4444;">|</span>商品列表</div>
					</van-col>
				</van-row>
				<!--数据-->
				<div>
					<van-row v-for="item in list">
						<van-card
						  :price="item.RealPrice"
						  :origin-price="item.MarketPrice"
						  :title="item.Name"
						  @click="onclick(item.Id)"
						>
						<div slot="footer">
						累计销量:{{item.VirtualSaleCount}}
						&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;
						{{item.BrowseCount}}次浏览
						 </div>
						 <div slot="thumb">
							 <img :src="item.GoodsImageUrl.src" onerror="this.src='../../img/520.jpg'">
						 </div>
						</van-card>
					</van-row>
				</div>
						</van-tab>
							<van-tab title="美妆" style="background: white;">
									<div style="margin-top: 25px;">
								<span style="margin-left: 15px;">
									<img style="width: 18%; height: 15%;" src="../../img/38.jpg" />
								</span>
								<span style="margin-left: 15px;">
									<img style="width: 18%; height: 15%;" src="../../img/39.png">
								</span>
								<span style="margin-left: 15px;">
									<img style="width: 18%; height: 15%;" src="../../img/40.jpg" />
								</span>
								<span style="margin-left: 15px;">
									<img style="width: 18%; height: 15%;" src="../../img/41.jpg" />
								</span>
							</div>
							<div style="margin-top: 5px;">
								<span style="margin-left: 25px; color: #C0C0C0;">
									护肤
								</span>
								<span style="margin-left: 45px; color: #C0C0C0;">
									彩妆
									<span style="margin-left: 45px; color: #C0C0C0;">
										面膜
									</span>
									<span style="margin-left: 45px; color: #C0C0C0;">
										个护
									</span>
							</div>
							<div style="margin-top: 25px;">
								<span style="margin-left: 15px;">
									<img style="width: 18%; height: 15%;" src="../../img/42.jpg" />
								</span>
								<span style="margin-left: 15px;">
									<img style="width: 18%; height: 15%;" src="../../img/43.png" />
								</span>
								<span style="margin-left: 15px;">
									<img style="width: 18%; height: 15%;" src="../../img/44.jpg" />
								</span>
								<span style="margin-left: 15px;">
									<img style="width: 18%; height: 15%;" src="../../img/46.jpg" />
								</span>
							</div>
							<div style="margin-top: 5px;">
								<span style="margin-left: 20px; color: #C0C0C0;">
									护手霜
								</span>
								<span style="margin-left: 40px; color: #C0C0C0;">
									口红
									<span style="margin-left: 40px; color: #C0C0C0;">
										香水
									</span>
									<span style="margin-left: 40px; color: #C0C0C0;">
										个护
									</span>
							</div>
							<div style="background-color: #eeeeee; width: 100%; height: 20px; margin-top: 30px;"></div>
							<div style="text-align: center; margin-top: 2`0px;">
								<van-icon color="red" name="clock-o"></van-icon>
								<span style="color: #C0C0C0;">每天十点上新</span>
							</div>
							<!-- 热门推荐 -->
										<van-row style="background-color: white; width: 100%;">
											<van-col span="11" id="tuijian">
												<div >
													<div style="margin-left: 5px;margin-top: 5px; font-size: 20px;"><span style="color: #FF4444;">|</span>热门推荐</div>
													<div v-for="item in hot">
														<a href="#"><img :src="item.GoodsImageUrl.src"  onerror="this.src='../../img/520.jpg'"/><br /></a>
														<van-card style="height: 60px;background-color: white;margin-top: -10px;" :title="item.Name" :price="item.MarketPrice"></van-card>
													</div>
												</div>
											</van-col>
										</van-row>
										<!-- 商品列表 -->
				<van-row style="background-color: white; width: 100%;">
					<van-col span="23">
						<div style="margin-left: 5px;margin-top: 5px; font-size: 20px;"><span style="color: #FF4444;">|</span>商品列表</div>
					</van-col>
				</van-row>
				<!--数据-->
				<div>
					<van-row v-for="item in list">
						<van-card
						  :price="item.RealPrice"
						  :origin-price="item.MarketPrice"
						  :title="item.Name"
						  @click="onclick(item.Id)"
						>
						<div slot="footer">
						累计销量:{{item.VirtualSaleCount}}
						&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;
						{{item.BrowseCount}}次浏览
						 </div>
						 <div slot="thumb">
							 <img :src="item.GoodsImageUrl.src" onerror="this.src='../../img/520.jpg'">
						 </div>

						</van-card>
					</van-row>
				</div>
							</van-tab>
							
							<van-tab title="今日特卖">
								<!-- 轮播图 -->
								<van-row style="background-color: white;">
									<van-swipe :autoplay="3000" style="border-radius:15px/15px ;">
										<van-swipe-item v-for="item in lunbos">
											<img :src="item.ImageUrl" style="width: 100%;" onerror="this.src='./../img/520.jpg'" />
										</van-swipe-item>
									</van-swipe>
								</van-row>
								<!-- 资讯通知栏 -->
								<van-row>
											<van-col span="4" style="text-align: center;line-height: 40px;color: red;font-size: 12px;">
												<a style="color: red;"href="javascript:;">资讯</a>
												<span style="border: 0.5px solid black;margin-left: 10px;"></span>
											</van-col>						
											<van-col span="16">
												<van-notice-bar	text="今日特价了,欢迎前来购买喽,动动手指赶快下单吧."
												left-icon="volume-o"></van-notice-bar>
											</van-col>	
											<van-col span="4" style="text-align: center;line-height: 40px;color: rgba(0,0,0,0.5);font-size: 12px;">
												<span style="border: 0.5px solid black;margin-right: 10px;"></span>
												<a style="color: red;"href="javascript:;">更多</a>
												</van-col>						
										</van-row>	
								<van-row style="background-color: #F8F8F8;margin-top: 10px;">
									<van-col span="6" v-for="item in type">
										<div style="width: 45px; height: 45px; border-radius: 15px/15px; background-color: coral; font-size: 25px;
												margin-top: 20px; margin-left: 10px; padding-left: 10px; padding-top: 10px;">
											{{item.Name[0]}}
										</div>
										<div style="color: #C0C0C0; margin-left: 10px; margin-top: 10px;">
											{{item.Name}}
										</div>
									</van-col>
									<van-col span="6" v-for="item in type">
										<div style="width: 45px; height: 45px; border-radius: 15px/15px; background-color: coral; font-size: 25px;
												margin-top: 20px; margin-left: 10px; padding-left: 10px; padding-top: 10px;">
											{{item.Name[0]}}
										</div>
										<div style="color: #C0C0C0; margin-left: 10px; margin-top: 10px;">
											{{item.Name}}
										</div>
									</van-col>
								</van-row>
										<!-- 热门推荐 -->
										<van-row style="background-color: white; width: 100%;">
											<van-col span="11" id="tuijian">
												<div >
													<div style="margin-left: 5px;margin-top: 5px; font-size: 20px;"><span style="color: #FF4444;">|</span>热门推荐</div>
													<div v-for="item in hot">
														<a href="#"><img :src="item.GoodsImageUrl.src"  onerror="this.src='../../img/520.jpg'"/><br /></a>
														<van-card style="height: 60px;background-color: white;margin-top: -10px;" :title="item.Name" :price="item.MarketPrice"></van-card>
													</div>
												</div>
											</van-col>
										</van-row>
										<!-- 商品列表 -->
				<van-row style="background-color: white; width: 100%;">
					<van-col span="23">
						<div style="margin-left: 5px;margin-top: 5px; font-size: 20px;"><span style="color: #FF4444;">|</span>商品列表</div>
					</van-col>
				</van-row>
				<!--数据-->
				<div>
					<van-row v-for="item in list">
						<van-card
						  :price="item.RealPrice"
						  :origin-price="item.MarketPrice"
						  :title="item.Name"
						  @click="onclick(item.Id)"
						>
						<div slot="footer">
						累计销量:{{item.VirtualSaleCount}}
						&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;
						{{item.BrowseCount}}次浏览
						 </div>
						 <div slot="thumb">
							 <img :src="item.GoodsImageUrl.src" onerror="this.src='../../img/520.jpg'">
						 </div>
						</van-card>
					</van-row>
				</div>
								</van-tab>
						</van-tabs>
						
					</van-col>
					</van-row>
				
				
			
				</van-pull-refresh>	
			</section>
			

		</div>
		<script>
			var vm = new Vue({
				el: '#app1',
				data: {
					value: "",
					lunbos: [ /*轮播的图片路径*/ ],
					hot: [ /*热门推荐*/ 
						
						],
					zixun:[/*咨询*/
						
					],
					list:[
						
					],
					type:[/**/
						
					],
					active: 2,//标题（热门推荐）
					finished: false,//刷新
					isLoading: false
				},
				methods: {
					onRefresh: function() {	//刷新					
						setTimeout(() => {
							this.$toast('刷新成功');
							this.isLoading = false;
						}, 500);
					},
					
					onclick:function(id){//当前商品id
						var del=plus.webview.create("../details.html","id",{},{shopId:id});
						plus.webview.show(del);//打开页面
					},
					onSearch: function() {//搜索
						var w = plus.webview.create("sousuo.html", "sousuo", {}, {
							name:this.value//获取查询的值
						}); 
						w.show();
						console.log(w.name);
					},
				},
				created: function() {
					_this = this;
					ajax({
						url: "http://dsapi.ysd3g.com/api/IndexData",
						dataType: "jsonp",
						data: {
							p: 1
						},
						success: function(res) {
							console.log(res);
							_this.lunbos = res.Data.CarouselFigureList;/*首页轮播图*/
							_this.hot=res.Data.GoodsRecommendList;/*首页推荐*/
							_this.type=res.Data.HotGoodsTypeList;/*分类*/
							_this.zixun=res.Data.InformationList;/*咨询*/
							
						}
					});
					ajax({
						url: "http://dsapi.ysd3g.com/api/IndexGoodsData",
						dataType: "jsonp",
						data: {
							p: 1
						},
						success: function(res) {
							console.log(res);
							_this.list=res.Data;/*商品列表*/
						}
					});
				}
			})
		</script>
	</body>
</html>
